<template>
	<!-- 展示长度条 -->
	<div class="bar-box">
		<div class="bar" v-if="password !== '' && password !== undefined" :style="{ background: barColor, width: width + '%' }">
			<!-- 展示文字 -->
			<div class="strength" :style="{ color: barColor }" v-if="password !== '' && password !== undefined">
				{{ strength }}
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="qrcode">
import { ref, watch } from 'vue'
// 引入验证方法
import { level } from '@/utils/util'

const props = withDefaults(defineProps<{ password: string; colorArray?: Array<string>; strengthArray?: Array<string> }>(), {
	password: '',
	colorArray: () => ['red', '#ee795c', 'orange', 'green', '#1B8EF8'],
	strengthArray: () => ['非常弱', '弱', '一般', '强', '非常强']
})
// [{color: string, width: number, strength: string}]
// 强度条颜色
const barColor = ref('')
// 强度条长度
const width = ref()
const widthArray = [20, 40, 60, 80, 100]
// 强度条说明
const strength = ref('')

// 监听注册页面的新密码变化状态，来改变密码强弱显示
watch(
	() => props.password,
	newVal => {
		if (newVal != '') {
			const res: number = level(newVal)
			barColor.value = props.colorArray[res]
			width.value = widthArray[res]
			strength.value = props.strengthArray[res]
		}
	}
)
</script>

<style scoped lang="scss">
.strength {
	position: relative;
	top: 5px;
	left: 0;
	font-size: 13px;
	color: #271e25;
	text-align: left;
	transition: 0.5s all ease;
}
.bar-box {
	position: relative;
	width: 100%;
	height: 6px;
	background-color: rgb(0 0 0 / 25%);
	border-radius: 6px;
	&::before,
	&::after {
		position: absolute;
		z-index: 10;
		box-sizing: border-box;
		display: block;
		width: 20%;
		height: inherit;
		content: '';
		background-color: transparent;
		border-color: #ffffff;
		border-style: solid;
		border-width: 0 5px;
	}
	&::before {
		left: 20%;
	}
	&::after {
		right: 20%;
	}
}
.bar {
	position: absolute;
	height: 6px;
	background: red;
	border-radius: 6px;
	transition: 0.5s all ease;
}
</style>
